<template>
	<view>
		<view class="u-m-t-40 u-m-l-30 u-m-r-30" v-for="(item,index) in list" :key="item.id">
			<view v-if="item.result_type == 5">
				<view class="u-flex u-m-b-20">
					<view class="trends_tag"></view>
					<span class="u-m-l-10 u-color-gray">{{item.hd_time}}</span>
					<span class="u-m-l-20">报名了一个活动</span>
				</view>
				<view class="u-card-box">
					<view class="u-flex u-col-top" @click="goActivityDetail(item.id)">
						<u-image width="200rpx" height="140rpx"
							:src="item.img"></u-image>
						<view class="u-m-l-20 u-flex-1 u-ellipsis">
							<view class="u-flex u-ellipsis">
								<view class="u-back-red u-tag-box">{{ handleGetStatus(item.activity_status) }}</view>
								<view class="u-m-l-10 u-font-bold u-ellipsis">{{item.title}}</view>
							</view>
							<view class="u-m-t-10 u-u-font-26 u-flex u-col-top">
								<u-icon class="u-m-t-5" name="clock-fill" color="#868B9A" size="30"></u-icon>
								<view class="u-m-l-10 u-ellipsis">{{ item.start_time}} - {{ item.end_time }}</view>
							</view>
							<view class="u-m-t-10 u-font-26 u-flex u-col-top">
								<u-icon name="map-fill" color="#868B9A" size="30"></u-icon>
								<view class="u-m-l-10 u-ellipsis">{{item.activity_site}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="u-flex u-m-b-20">
					<view class="trends_tag"></view>
					<span class="u-m-l-10 u-color-gray">{{item.hd_time}}</span>
					<span class="u-m-l-20">{{ item.result_type == 6 ? '发布了一个酒局' : '报名了一个酒局' }}</span>
				</view>
				<view class="u-card-box">
					<view class="u-flex u-col-top" @click="goTeaDetail(item.id)">
						<view>
							<view class="tea_left_ava">
								<u-image width="160rpx" height="160rpx" border-radius="20" :src="item.head_img"></u-image>
								<!-- <view class="tea_left_dec">能量值:{{item.number}}</view> -->
							</view>
							<!-- <view class="u-text-center u-font-24 u-m-t-10 u-color-gray">能量值:{{item.number}}</view> -->
							<view class="u-text-center u-font-24 u-m-t-15 number_box">
								<view class="u-font-bold u-font-26">{{item.number}}</view>
								<view class="u-font-23 u-m-l-10">能量值</view>
							</view>
						</view>
						<view class="u-m-l-20 u-font-desc u-flex-1">
							<view class="u-flex">
								<view class="tea_right_tag">{{item.theme_name}}</view>
								<view class="tea_right_role u-m-l-10" v-if="item.is_top == 1">推荐酒局</view>
							</view>
							<view class="u-m-t-10">
								<span class="u-color-gray">时间：</span>
								<!-- <span class="">{{ item.start_time }} - {{ item.end_time}}</span> -->
								<span class="">{{ item.starting_time }}</span>
							</view>
							<view class="u-m-t-10 u-flex">
								<view>
									<span class="u-color-gray">青创私董：</span>
									<span>{{item.name}}</span>
								</view>
							</view>
							<view class="u-m-t-10">
								<span class="u-color-gray">费用：</span>
								<span class="u-color-red">{{item.pay_name}}</span>
							</view>
							<view class="u-m-t-10 u-flex u-flex-wrap" v-if="item.label[0]">
								<view class="u-color-green u-m-r-10" v-for="(labelItem,labelIndex) in item.label" :key="labelIndex">#{{labelItem}}</view>
							</view>
							<view class="u-border-top u-m-t-20 u-p-t-15 u-flex u-row-between">
								<view class="u-flex">
									<!-- <u-icon name="star-fill" color="#F96257"></u-icon> -->
									<u-icon name="eye-fill" size="32" color="#808080"></u-icon>
									<view class="u-m-l-5 u-font-26 u-color-gray">{{item.view_number}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { activityStatus } from '@/utils/index.js'
	export default{
		props:["list"],
		methods:{
			handleGetStatus(ind) {
				return activityStatus()[ind]
			},
			goActivityDetail(id){
				uni.navigateTo({
					url: `/pages/activityDetail/activityDetail?id=${id}`
				})
			},
			goTeaDetail(id){
				uni.navigateTo({
					url: `/teaBureau/teaDetail/teaDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.trends_tag{
		width: 20rpx;
		height: 20rpx;
		border-radius: 100%;
		background: #FB6316;
	}
	
	.number_box {
		background: #FF5B01;
		color: #fff;
		padding: 11rpx 20rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tea_left_ava {
		position: relative;
	
		.tea_left_dec {
			position: absolute;
			bottom: 5px;
			font-size: 20rpx;
			left: 20rpx;
			color: #fff;
		}
	}
	
	.tea_right_tag {
		background: #2C76ED;
		color: #fff;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		font-size: 24rpx;
	}
	
	.tea_right_role {
		background: #F96257;
		color: #fff;
		border-radius: 8rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
	}
</style>